import React, { useState, useEffect, useMemo, useRef } from "react";
import * as echarts from "echarts";
import "echarts-wordcloud";
export default () => {
  const ref = useRef();
  const [chart, setChart] = useState(null);
  const [data, setData] = useState(null);
  const option = useMemo(() => {
    if (!data) return null;
    let op = {
      // backgroundColor: "#fff",
      tooltip: {
        pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
      },
      series: [
        {
          type: "wordCloud",
          gridSize: 1,
          sizeRange: [12, 55],
          rotationRange: [-45, 0, 45, 90],
          textStyle: {
            // normal: {
            color() {
              return (
                  `rgb(${
                  Math.round(Math.random() * 255)
                  }, ${
                  Math.round(Math.random() * 255)
                  }, ${
                  Math.round(Math.random() * 255)
                  })`
              );
            },
            // },
          },
          left: "center",
          top: "center",
          right: null,
          bottom: null,
          width: "90%",
          height: "110%",
          data,
        },
      ],
    };
    return op;
  }, [data]);

  /*=======请求数据 =======*/
  const getData = () => {
    let wordData = [
      {
        name: "游戏",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "美食",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "衣服",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "鞋子",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "零食",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "化妆品",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "吃货",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "美食家",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "程序猿",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "肝帝",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "老师",
        value: Math.round(Math.random() * 20000),
      },
      {
        name: "宠物",
        value: Math.round(Math.random() * 20000),
      },
    ];
    setData(wordData);
  };

  /* ======== 定时改变data ======= */
  useEffect(() => {
    getData();
    let timer = setInterval(() => {
      getData();
    }, 3000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  /* ======== 生成图表实例 ======= */
  useEffect(() => {
    ref.current && setChart(echarts.init(ref.current));
  }, []);

  /* ======== 组件销毁时销毁图表实例 ======== */
  useEffect(() => {
    return () => {
      console.log("销毁图表实例");
      chart && chart.dispose();
    };
  }, [chart]);

  /* ======= 渲染图表 ====== */
  useEffect(() => {
    chart && option && chart.setOption(option);
  }, [chart, option]);

  return (
    <div style={{ width: "100%", height: "100%" }} ref={ref}></div>
  );
};
